<template>
		<view>
			<form @submit="formSubmit" @reset="" >
				<view class="setbio">
				<view class="intro">
					<textarea cols="30" rows="30" maxlength="120"  name="input"  v-model="bio"></textarea>
					<view class="count">
						<p :class="{'remnant':remnant!=0,'zero':remnant==150}">{{remnant}}</p>
						<view class="">/120</view>
					</view>
				</view>
				
				<view class="save-btn">
					<button form-type="submit" type="primary" hover-class='none'>保存</button>
				</view>
				</view>
				
			</form>
		</view>
</template>

<script>
	import api from '../../../common/api.js'
	
	export default {
		
		data() {
			return {
				bio:'',		//用户简介
			}
		},
		
		computed:{
			remnant() {//记录简介字数
				return this.bio.length
			}
		},
		
		methods:{
			formSubmit(e) {//修改用户简介
				api.SetBio(e.detail.value.input)
				setTimeout(function() {
					uni.navigateBack({  
						delta: 1  
					});
				}, 500)
			}
		},
		onLoad(p) {
			if(p.bio == "null") {
				this.bio = ''
			} 
			else {
				this.bio = p.bio
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.setbio {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		
	}
	.intro {
		position: relative;
		margin: 20rpx 0 20rpx ;
		background-color: #fff;
		border: 2rpx solid #eeeeee;
		.count {
			display: flex;
			position: absolute;
			color: #999;
			right: 10rpx;
			bottom: 10rpx;
			.remnant {
				color: #999;
			}
			.zero{
				color: #cb143c;
			}
		}
		textarea {
			height: 220rpx;
			width: 480rpx;
			padding: 20rpx;
			font-size: 28rpx;
		}
	}
	
	input[type="text"]:focus {
	  border:1px solid #ff7496;
	}
	button {
		display: inline-block;
		font-size: 32rpx;
		height: 80rpx;
		width: 130rpx;
		line-height: 80rpx;
	}
</style>

